<template>
    <div id="index-task" :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        name: 'index-task',
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '33%'
            },
            height: {
                type: String,
                default: '350px'
            },
            autoResize: {
                type: Boolean,
                default: true
            }
        },
        data () {
            return {
                chart: null,
                isResize:true,
            }
        },
        methods: {
            initChart() {
                this.chart = echarts.init(document.getElementById('index-task'))
                this.setOptions()
            },
            setOptions({} = {}) {
                this.chart.setOption({
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        padding: [5, 10]
                    },
                    legend: {
                        data: ['Last-year', 'This-year']
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320,1400,1500,1560,1750,1780],
                        type: 'line',
                        color: ['#58afed'],
                        areaStyle: {}
                    },
                    {
                        data: [1500, 1430, 1200, 850, 600, 400, 200],
                        type: 'line',
                        color: ['#58afed'],
                        areaStyle: {}
                    }]
                })
                window.onresize = this.chart.resize;
            }
        },
        mounted () {
            this.initChart();
        }
    }
</script>

<style scoped>

</style>